<div class="card">
    <div class="card-header">
        <h1 class="card-title">数据预览页面</h1>
    </div>
    <div class="card-content">
        <p style="font-size: 16px; line-height: 1.6; color: #666; margin-bottom: 32px;">
            欢迎使用彼知AI数据预览功能。这里提供了专家和问答数据的预览页面，采用后端渲染确保数据安全。
        </p>
        
        <div style="margin-bottom: 32px;">
            <h3 style="font-size: 20px; font-weight: 600; color: #333; margin-bottom: 24px; border-bottom: 2px solid #667eea; padding-bottom: 8px;">
                预览页面示例
            </h3>
            
            <div style="margin-bottom: 32px; padding: 24px; background: #f8f9fa; border-radius: 12px; border: 1px solid #e9ecef;">
                <h4 style="font-size: 18px; font-weight: 600; color: #333; margin: 0 0 12px 0;">专家详情预览</h4>
                <p style="font-size: 14px; color: #666; margin-bottom: 16px; line-height: 1.5;">
                    查看专家的详细信息，包括基本资料、展示图片、经典案例等。
                </p>
                <div style="display: flex; gap: 12px; margin-bottom: 12px; flex-wrap: wrap;">
                    <a href="/preview/expert/7" class="btn" style="background: #667eea; color: white; border-color: #667eea;">
                        查看李律师详情
                    </a>
                    <a href="/preview/expert/4" class="btn" style="background: #667eea; color: white; border-color: #667eea;">
                        查看刘营养师详情
                    </a>
                </div>
                <p style="font-size: 12px; color: #888; margin: 0;">
                    URL格式：<code style="background: #e9ecef; padding: 2px 6px; border-radius: 4px; font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;">/preview/expert/{专家ID}</code>
                    （如：/preview/expert/7）
                </p>
            </div>

            <div style="margin-bottom: 32px; padding: 24px; background: #f8f9fa; border-radius: 12px; border: 1px solid #e9ecef;">
                <h4 style="font-size: 18px; font-weight: 600; color: #333; margin: 0 0 12px 0;">问答详情预览</h4>
                <p style="font-size: 14px; color: #666; margin-bottom: 16px; line-height: 1.5;">
                    查看问答的详细信息，包括问题内容、专家回答、用户评分等。
                </p>
                <div style="display: flex; gap: 12px; margin-bottom: 12px; flex-wrap: wrap;">
                    <a href="/preview/question/1" class="btn" style="background: #28a745; color: white; border-color: #28a745;">
                        查看问答1详情
                    </a>
                    <a href="/preview/question/2" class="btn" style="background: #28a745; color: white; border-color: #28a745;">
                        查看问答2详情
                    </a>
                </div>
                <p style="font-size: 12px; color: #888; margin: 0;">
                    URL格式：<code style="background: #e9ecef; padding: 2px 6px; border-radius: 4px; font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;">/preview/question/{问答ID}</code>
                </p>
            </div>

            <div style="margin-bottom: 32px; padding: 24px; background: #fff8f0; border-radius: 12px; border: 1px solid #ffd9b3;">
                <h4 style="font-size: 18px; font-weight: 600; color: #333; margin: 0 0 12px 0;">API测试工具</h4>
                <p style="font-size: 14px; color: #666; margin-bottom: 16px; line-height: 1.5;">
                    测试子系统P的API接口调用，验证数据传输和响应格式。
                </p>
                <div style="display: flex; gap: 12px; margin-bottom: 12px; flex-wrap: wrap;">
                    <a href="/preview/api-test" class="btn" style="background: #ff8c00; color: white; border-color: #ff8c00;">
                        API测试工具
                    </a>
                </div>
                <p style="font-size: 12px; color: #888; margin: 0;">
                    用于开发和调试阶段的API接口测试
                </p>
            </div>

            <div style="margin-bottom: 32px; padding: 24px; background: #fff3cd; border-radius: 12px; border: 1px solid #ffeaa7;">
                <h4 style="font-size: 18px; font-weight: 600; color: #333; margin: 0 0 12px 0;">用户登录测试</h4>
                <p style="font-size: 14px; color: #666; margin-bottom: 16px; line-height: 1.5;">
                    测试用户手机验证码登录功能，验证移动端认证API的正常工作。
                </p>
                <div style="display: flex; gap: 12px; margin-bottom: 12px; flex-wrap: wrap;">
                    <a href="/preview/login-test" class="btn" style="background: #ffc107; color: #212529; border-color: #ffc107;">
                        用户登录测试
                    </a>
                </div>
                <p style="font-size: 12px; color: #888; margin: 0;">
                    支持手机验证码发送和登录功能测试
                </p>
            </div>
        </div>

        <div style="margin-top: 32px; padding: 24px; background: #f0f8ff; border-radius: 12px; border: 1px solid #b3d9ff;">
            <h3 style="font-size: 18px; font-weight: 600; color: #333; margin: 0 0 16px 0;">功能特点</h3>
            <ul style="margin: 0; padding-left: 0; list-style: none;">
                <li style="padding: 4px 0; color: #333; font-size: 14px;">✅ 后端渲染，确保API安全性</li>
                <li style="padding: 4px 0; color: #333; font-size: 14px;">✅ 响应式设计，支持移动端</li>
                <li style="padding: 4px 0; color: #333; font-size: 14px;">✅ 美观的数据展示界面</li>
                <li style="padding: 4px 0; color: #333; font-size: 14px;">✅ 独立的预览布局</li>
                <li style="padding: 4px 0; color: #333; font-size: 14px;">✅ 与管理后台完全分离</li>
            </ul>
        </div>

        <div style="margin-top: 24px; padding: 24px; background: #fff8f0; border-radius: 12px; border: 1px solid #ffd9b3;">
            <h3 style="font-size: 18px; font-weight: 600; color: #333; margin: 0 0 16px 0;">使用说明</h3>
            <ol style="margin: 0; padding-left: 20px;">
                <li style="padding: 4px 0; color: #333; font-size: 14px; line-height: 1.5;">
                    预览页面使用后端渲染，确保API体系的安全性
                </li>
                <li style="padding: 4px 0; color: #333; font-size: 14px; line-height: 1.5;">
                    专家详情页面：<code style="background: #e9ecef; padding: 2px 6px; border-radius: 4px; font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; font-size: 12px;">/preview/expert/{专家ID}</code>
                </li>
                <li style="padding: 4px 0; color: #333; font-size: 14px; line-height: 1.5;">
                    问答详情页面：<code style="background: #e9ecef; padding: 2px 6px; border-radius: 4px; font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; font-size: 12px;">/preview/question/{问答ID}</code>
                </li>
                <li style="padding: 4px 0; color: #333; font-size: 14px; line-height: 1.5;">
                    登录测试页面：<code style="background: #e9ecef; padding: 2px 6px; border-radius: 4px; font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; font-size: 12px;">/preview/login-test</code>
                </li>
                <li style="padding: 4px 0; color: #333; font-size: 14px; line-height: 1.5;">
                    这些页面可以直接分享给其他人查看，无需登录
                </li>
                <li style="padding: 4px 0; color: #333; font-size: 14px; line-height: 1.5;">
                    页面在服务器端直接查询数据库获取最新数据
                </li>
            </ol>
        </div>
    </div>
</div>

<style>
    @media (max-width: 768px) {
        .card div[style*="display: flex"] {
            flex-direction: column !important;
        }
        
        .btn {
            width: 100% !important;
            text-align: center;
        }
    }
</style>
